<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>users</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <style>
        .bg-mydark {
            background-color: rgb(244, 246, 249);

        }

        .content {
            background-color: rgb(244, 246, 249);
            text-align: center;
            height: 800px;
            padding: 100px 60px;
        }

        .tab {
            margin-top: 20px;
            background-color: rgb(255, 255, 255);
        }

        button {
            margin: 0 10px;
        }

        .sexicon {
            font-size: 24px;
            position: relative;
            top: 8px;
            left: -5px;
        }

        .fa-mars {
            color: #3f3fe1;
        }

        .fa-venus {
            color: #ff8497;
        }

        .fa-trash-alt {
            color: #d03535;
        }

        .shuttle {
            display: flex;
            text-align: left;
            justify-content: center;
        }

        .left-ul, .right-ul, .center-btn {
            width: 180px;
        }

        .center-btn {
            justify-content: center;
        }

        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        label {
            width: 100%;
            height: 37px;
            line-height: 37px;
            border-radius: 2px;
        }

        .inputfile + label {
            font-size: 1.25em;
            font-weight: 700;
            color: #000000;
            background-color: #ffffff;
            display: inline-block;
            border: 1px solid #c7c7c7;
        }
    </style>
</head>

<body>
<div class="container-fluid bg-mydark">
    <div class="content">

        <form class="layui-form layui-form-pane">
            <!--                名称-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="ename"/>
                    </div>
                </div>
            </div>
            <!--                部门-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <select lay-verify="required" id="dept">

                    </select>
                </div>
            </div>
            <!--                查寻-->
            <div class="layui-form-item layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn-primary layui-btn" id="sel">综合查询</button>
                </div>
            </div>
            <!--                添加-->
            <div class="layui-form-item layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn-primary layui-btn" data-toggle="modal"
                            data-target="#exampleModal">
                        <i class="fas fa-user-plus" style="margin-right: 10px"></i>添加员工
                    </button>
                    <!--                            模态框-->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加员工</h4>
                                </div>
                                <div class="modal-body">

                                    <form class="layui-form layui-form-pane" id="addform">
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">名称</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" lay-verify="uname"
                                                           id="ename2"
                                                           readonly/>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">部门</label>
                                            <div class="layui-input-inline">
                                                <select lay-verify="required" id="dept_modal">

                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">状态</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <select lay-verify="required" id="status">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">描述</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" id="remark"
                                                           lay-verify="required"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">openid</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" id="openid"
                                                           lay-verify="required"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">电话</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="tel" lay-verify="phone" class="layui-input" id="phone"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">账号</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" lay-verify="required|num"
                                                           id="num"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">密码</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" lay-verify="required|pass"
                                                           id="pass"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">身份证号
                                            </label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" readonly id="cardid"
                                                           required/>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">邮箱</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" lay-verify="required|email"
                                                           id="email" required/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">性别 </label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="radio" name="sex" value="M" checked/><i
                                                        class="fas sexicon fa-mars"></i>
                                                    <input type="radio" name="sex" value="F"/><i
                                                        class="fas sexicon fa-venus"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-inline">
                                            <label class="layui-form-label">上传身份证</label>
                                            <div class="layui-input-inline">
                                                <div class="layui-input-inline">
                                                    <input type="file" name="file" class="inputfile" id="file"
                                                           value="上传图片">
                                                    <label for="file"><i class="fas fa-cloud-upload-alt"></i></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <input type="button" class="layui-btn  layui-btn-primary"
                                                       data-dismiss="modal" value="关闭"/>
                                                <input type="submit" class="layui-btn layui-btn-primary"
                                                       lay-submit="" lay-filter="demo1" id="add"></input>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                            模态框./-->
                </div>
            </div>
        </form>
        <!--                表格-->
        <table class="table table-bordered tab">
            <thead>
            <th>编号</th>
            <th>名称</th>
            <th>部门</th>
            <th>状态</th>
            <th>描述</th>
            <th>openid</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>身份证号</th>
            <th>性别</th>
            <th>操作</th>
            </thead>
            <tbody id="content">
            </tbody>
        </table>
        <!--                表格./-->
        <!--                            修改模态框-->
        <div class="modal fade" id="modal2" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加员工</h4>
                    </div>
                    <input type="text" id="eid3" hidden>
                    <div class="modal-body">
                        <form class="layui-form layui-form-pane">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="ename3" readonly lay-verify="required|uname"/>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">部门</label>
                                <div class="layui-input-inline">
                                    <select lay-verify="required" id="dept3">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <select lay-verify="required" id="status3">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="remark3" lay-verify="required"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">openid</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="openid3" lay-verify="required"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="phone3" lay-verify="required|phone"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">账号</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="num3" lay-verify="required|num"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="pass3" lay-verify="required|pass"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">身份证号
                                </label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="cardid3"
                                               lay-verify="required|idcard" readonly/>
                                    </div>
                                </div>
                            </div>


                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" lay-verify="required|email" id="email3"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">性别 </label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="radio" name="sex3" value="M" id="m"/><i
                                            class="fas sexicon fa-mars"></i>
                                        <input type="radio" name="sex3" value="F" id="f"/><i
                                            class="fas sexicon fa-venus"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item ">
                                <div class="layui-input-block">
                                    <input type="button" class="layui-btn layui-btn-primary"
                                           data-dismiss="modal" value="关闭"/>
                                    <input type="submit" class="layui-btn layui-btn-primary" lay-filter="demo2"
                                           lay-submit="" id="update">
                                </div>
                            </div>
                        </form>

                    </div>


                </div>
            </div>
        </div>
        <!--                            修改模态框./-->

        <!--                            管理模态框-->
        <div class="modal fade" id="modal3" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <label>角色信息维护</label>
                    </div>
                    <div class="modal-body">
                        <div id="test" class="demo-transfer"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--                            管理模态框./-->

    </div>

</div>
<script>

    var empdata
    // 查找
    $("#sel").on("click", function () {
        //    获取输入框值
        let ename = $("#ename").val();
        //    获取下拉框值
        let dept = $("#dept").val();
        $.ajax({
            url: "selemp",
            dataType: "json",
            data: {
                ename: ename,
                did: dept
            },
            success: function (data) {
                tableload(data)
            }
        })
    })

    $("#file").change(function (e) {
        var formdata = new FormData()
        formdata.append("sc", $("#file").get(0).files[0]);
        if (formdata) {
            console.log(formdata)
            $.ajax({
                url: "uploadimg",
                type: "post",
                contentType: false,
                processData: false,
                data: formdata,
                success: function (data) {
                    empdata = data
                    $("#ename2").val(empdata.name);
                    $("#cardid").val(empdata.num);
                    if (empdata.sex == "男") {
                        empdata.sex = "M"
                    } else {
                        empdata.sex = "F"
                    }
                    $('[name=sex]').each(function (i, item) {
                        if ($(item).val() == empdata.sex) {
                            //更改选中值
                            $(item).prop('checked', true);
                            //重新渲染
                            layui.use('form', function () {
                                var form = layui.form;
                                form.render();
                            });
                        }
                    })
                }
            })
        }

    })


    //表单验证提交
    layui.use('form', function () {

        form = layui.form;

        form.verify({
            uname: function (value) {
                if (value.length == 0) {
                    return '不能为空';
                }
            }
            , pass: [
                /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/
                , '密码必须包含字母和数字,长度在8到15位'
            ]
            , num: [
                /^[a-zA-Z0-9_-]{4,12}$/
                , '4到12位（字母，数字，下划线，减号）'
            ]
            , idcard: [
                /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                , '身份证格式不合法'
            ]
        });

        // 添加
        form.on('submit(demo1)', function (data) {
            let ename2 = $("#ename2").val();
            let dept2 = $("#dept_modal").val();
            let status = $("#status").val();
            let remark = $("#remark").val();
            let openid = $("#openid").val();
            let phone = $("#phone").val();
            let num = $("#num").val();
            let pass = $("#pass").val();
            let cardid = $("#cardid").val();
            let sex = $("input[name='sex']:checked").val();
            let email = $("#email").val();

            $.ajax({
                url: "addemp",
                dataType: "json",
                data: {
                    ename: ename2,
                    did: dept2,
                    status: status,
                    remark: remark,
                    openid: openid,
                    phone: phone,
                    num: num,
                    pass: pass,
                    cardid: cardid,
                    sex: sex,
                    email: email
                },
                success: function (data) {
                    if (data) {
                        layer.alert("添加成功",{icon:3})
                        location.reload()
                    }else{
                        layer.msg("该用户已存在",{icon:5})
                    }
                }
            })
            return false;
        });

        form.on('submit(demo2)', function (data) {
            let eid = $("#eid3").val();
            $.ajax({
                url: "updatemp/" + eid,
                dataType: "json",
                data: {
                    ename: $("#ename3").val(),
                    did: $("#dept3").val(),
                    status: $("#status3").val(),
                    remark: $("#remark3").val(),
                    openid: $("#openid3").val(),
                    phone: $("#phone3").val(),
                    num: $("#num3").val(),
                    pass: $("#pass3").val(),
                    cardid: $("#cardid3").val(),
                    sex: $("input[name='sex3']:checked").val(),
                    email: $("#email3").val()
                },
                success: function (resp) {
                    if (resp) {
                        layer.msg("修改成功",{icon:3})
                        location.reload()
                    } else {
                        layer.msg("修改失败",{icon:5})
                    }
                }

            })
        })
    })


    //删除
    function del(obj) {
        let eid = $(obj).parent().parent().find('td').get(0).innerHTML
        //询问框

        layer.confirm('确定删除吗？', {
            btn: ['删除','取消'] //按钮
        }, function(){
            $.ajax({
                url: "delemp/" + eid,
                dataType: "json",
                success: function (data) {
                    if (data === 1) {
                        layer.msg("删除成功",{icon:3})
                        location.reload()
                    } else if (data === -1) {
                        layer.msg("该用户拥有角色，不能删除",{icon:2})
                    } else {
                        layer.msg("删除失败",{icon:5})
                    }
                }
            })
        }, function(){

        });


    }

    //修改
    function set(obj) {
        let eid = $(obj).parent().parent().get(0).children[0].innerHTML
        $("#eid3").val(eid)
        let state = new Map();
        state.set("在职", "1")
        state.set("离职", "2")
        $.ajax({
            url: "selemp/" + eid,
            dataType: "json",
            success: function (data) {
                console.log(data)
                $("#ename3").val(data.ename);
                $("#dept3").val(data.did);
                $("#status3").val(data.status);
                console.log(state.get(data.status))
                console.log($("#status3").val())
                $("#remark3").val(data.remark);
                $("#openid3").val(data.openid);
                $("#phone3").val(data.phone);
                $("#num3").val(data.num);
                $("#pass3").val(data.pass);
                $("#cardid3").val(data.cardid);
                $('[name=sex3]').each(function (i, item) {
                    if ($(item).val() == data.sex) {
                        //更改选中值
                        $(item).prop('checked', true);
                        //重新渲染
                        layui.use('form', function () {
                            var form = layui.form;
                            form.render();
                        });
                    }
                })
                $("#email3").val(data.email);
            }
        })
    }

    //---修改

    //管理
    function manage(obj) {
        layui.use(['transfer', 'util'], function () {
            var $ = layui.$
                , transfer = layui.transfer
                , util = layui.util

            function getroles() {
                let eid = $(obj).parent().parent().find('td').get(0).innerHTML
                let currole = []//当前角色id
                let allrole = []//所有角色id名称
                let datas = []//接受单个
                let ids = []//穿梭框变更的id
                $.ajax({
                    url: "getrole/" + eid,
                    dataType: "json",
                    success: function (resp) {
                        for (let i = 0; i < resp.length; i++) {
                            currole[i] = resp[i].rid
                        }
                    }
                })

                $.ajax({
                    url: "getroles",
                    dataType: "json",
                    success: function (resp) {
                        for (let i = 0; i < resp.length; i++) {
                            datas = {
                                value: resp[i].rid,
                                title: resp[i].rname
                            }
                            allrole.push(datas)//全部放入
                        }

                        setTimeout(function () {//延迟加载
                            //穿梭时的回调
                            transfer.render({
                                elem: '#test',
                                data: allrole,
                                title: ['--所有角色--', '--当前用户角色--'],
                                value: currole,
                                onchange: function (obj, index) {
                                    for (var i in obj) {
                                        ids.push(obj[i].value)
                                    }
                                    var arr = ['所有角色', '当前用户角色'];
                                    if (arr[index] == '所有角色') {//添加角色
                                        $.ajax({
                                            url: 'addRoleById', //用户添加角色
                                            type: 'post',
                                            dataType: 'json',
                                            data: {
                                                "eid": eid, //用户id
                                                "ids": JSON.stringify(ids), //角色id
                                            },
                                            success: function (data) {
                                                location.reload();
                                            },
                                            error: function (e) {
                                                alert('请求失败')
                                            }
                                        });
                                    } else {//删除角色
                                        $.ajax({
                                            url: 'removeRoleById', //用户移除角色
                                            type: 'post',
                                            dataType: 'json',
                                            data: {
                                                "eid": eid, //用户id
                                                "ids": JSON.stringify(ids), //角色id
                                            },
                                            success: function (data) {
                                                location.reload();
                                            },
                                            error: function (e) {
                                                alert('请求失败')
                                            }
                                        });
                                    }

                                }
                            })
                        }, 500);

                    }
                })
            }

            setTimeout(function () {
                //延迟加载
                getroles()
            }, 500);

        })

    }

    //---管理

    //表格填充
    function tableload(data) {
        $("#content").children().remove()
        for (let i = 0; i < data.length; i++) {
            let element = data[i]
            let html = "<tr>"
            html += "<td>" + element.eid + "</td>"
            html += "<td>" + element.ename + "</td>"
            html += "<td>" + element.dname + "</td>"
            html += "<td>" + element.sname + "</td>"
            html += "<td>" + element.remark + "</td>"
            html += "<td>" + element.openid + "</td>"
            html += "<td>" + element.phone + "</td>"
            html += "<td>" + element.email + "</td>"
            html += "<td>" + element.cardid + "</td>"
            html += "<td>" + element.sex + "</td>"
            html += "<td> <button type='button' class='layui-btn-sm layui-btn layui-btn-primary' data-toggle='modal' data-target='#modal2' onclick='set(this)'><i class='fas fa-wrench'></i></button>" +
                "     <button type='button' class='layui-btn-sm layui-btn layui-btn-primary' onclick='del(this)'><i class='fas fa-trash-alt'></i></button>" +
                "     <button type='button' class='layui-btn-sm layui-btn layui-btn-primary' data-toggle='modal' data-target='#modal3' onclick='manage(this)'>管理角色</button></td>"

            html += "</tr>"
            $("#content").append(html)
        }
    }

    //---表格填充

    //初始化加载
    function load() {
        //加载员工表
        $.ajax({
            url: "getemps",
            dataType: "json",
            success: function (data) {
                tableload(data)
            }
        })

        //动态加载部门下拉框
        $.ajax({
            url: "getdepts",
            dataType: "json",
            success: function (data) {
                let select = $("#dept")
                let select2 = $("#dept_modal")
                let select3 = $("#dept3")
                for (let i = 0; i < data.length; i++) {
                    let element = data[i]
                    select.append(new Option(element.dname, element.did));// 下拉菜单里添加元素
                    select2.append(new Option(element.dname, element.did));// 下拉菜单里添加元素
                    select3.append(new Option(element.dname, element.did));// 下拉菜单里添加元素
                }
                layui.form.render("select");
            }
        })

        //动态加载状态下拉框
        $.ajax({
            url: "getstatus",
            dataType: "json",
            success: function (data) {
                let select3 = $("#status3")
                let select = $("#status")
                for (let i = 0; i < data.length; i++) {
                    let element = data[i]
                    select.append(new Option(element.sname, element.sid));// 下拉菜单里添加元素
                    select3.append(new Option(element.sname, element.sid));// 下拉菜单里添加元素
                }
                layui.form.render("select");
            }
        })

        //加载角色
        let rolelist = $("#rolelist")
        $.ajax({
            url: "getroles",
            dataType: "json",
            success: function (resp) {
                for (let i = 0; i < resp.length; i++) {
                    let element = resp[i];
                    let html = "<li><input type='checkbox' value='" + element.id + "'> " + element.rname + "</li>"
                    rolelist.append(html)
                }
            }
        })

    }

    //---初始化加载

    load()

</script>

</body>

</html>